<template>
	<view>
		<view v-if="orders.length>0" class="orderList" v-for="(item,index) in orders" :key="index">
			<view v-if="skuIndex===0" v-for="(sku,skuIndex) in item.skus" :key="skuIndex">
				<view class="shop">
				  <view class="shop_name">
					<image :src='sku.url' mode='widthFix' lazy-load='true'></image>
					{{index}}规格:{{sku.skuName}}
				  </view>
				  <text v-if="item.orderStatus===101" class="text-red">{{item.orderStatusName}}</text>
				  <text v-else :class="item.payStatus===301?'text-green':'text-red'">{{item.payStatusName}}</text>
				</view>
				<view class="proInfo" @click="toOrderDetail(item.orderNo)">
				  <image class="proInfo_img" :src='sku.url' mode='widthFix' lazy-load='true'></image>
				  <view class="proInfo_right">
					<view class="proInfo_text">
					  <view class="title">{{sku.productName}}</view>
					  <text class="lg text-black cuIcon-right"></text>
					</view>
					<view class="proInfo_text">
					  <view class="dtt">{{item.createDate}}</view>
					  <text class="acount">×{{sku.buyCount}}{{sku.unit}}</text>
					</view>
				  </view>
				</view>
			</view>
			<view class="orderNum">
			  <view>订单号:{{item.orderNo}}</view>
			  <view>金额:<text>￥{{item.payPrice}}</text></view>
			</view>
		</view>
		<view v-if="orders.length===0" class="text-center margin-top-100">没有订单数据</view>
	</view>
</template>

<script>
	export default {
		name:"order-list",
		props:{
			orders: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
			};
		},
		methods:{
			toOrderDetail(orderNo){
				uni.navigateTo({
					url:"/pages/home/order/detail?orderNo="+orderNo
				});
			}
		}
	}
</script>

<style lang="scss">
	.orderList{
		border-radius:16rpx;background-color: #fff; margin:20rpx; padding: 30rpx 24rpx 0 24rpx;box-sizing: border-box;
	  .shop,.proInfo,.orderNum{
		  display: flex;justify-content: space-between;
		.shop_name{
		  color: #333;
		  image{
		    width: 32rpx;
		    height: 32rpx;
		    margin-right: 15rpx;
		    position: relative;
		    top: 8rpx;
		  }
		}
	  }
	  .proInfo{
	    padding: 30rpx 0;box-sizing: border-box;
		.proInfo_img{width:110rpx;height:110rpx;border-radius:10rpx;overflow: hidden;}
		.proInfo_right{
		  width: 522rpx;padding-top: 12rpx;box-sizing: border-box;
		  .proInfo_text{
		    display: flex;justify-content: space-between;justify-items: middle;
			.title{color: #000;line-height: 45rpx;white-space: nowrap;max-width: 480rpx;text-overflow: ellipsis;overflow: hidden;margin-bottom: 10rpx;}
			.dtt{color: #999; }
			.acount{
			  color: #999; 
			}
		  }
		}
	  }
	  .orderNum{
	    color: #333; line-height: 82rpx;border-top: 2rpx solid #eee;white-space: nowrap;
	  	text{position: relative;font-size: 32rpx;color: #000; }
	  }
	}
</style>
